import { setTitle } from '@/utils/page';
import { LockOutlined, UserOutlined } from '@ant-design/icons';
import { LoginFormPage, ProFormText } from '@ant-design/pro-components';
import { useModel ,useNavigate} from '@umijs/max';
import { useCallback, useEffect } from 'react';

import { message ,App} from 'antd';
import { flushSync } from 'react-dom';


import { login } from '@/utils/user';
const HomePage: React.FC = () => {
	const { title } = useModel('Login.model');
	
	const user=useModel("global")
	const u=useModel("@@initialState")
	console.log(`u:`,u)
	const {initialState,setInitialState,refresh,loading}=u
	const navigate=useNavigate()
	useEffect(() => {
		setTitle(title);
		
	});
	const loginFun = useCallback((values: any) => {
		login(values.username,values.password).then(res=>{
			console.log(`res:`,res)
			if(res.code===0){
				// user.setUserInfo(res.data)
				let obj={
					...initialState,
					role:res?.data?.role||"",
					login:true
				}
				// obj={
				// 	name:"name",
				// 	role:"user",
				// 	login:true
				// }
				flushSync(()=>{
					setInitialState((s)=>({...s,...obj})).then(res=>{
					})
					navigate("/")
					message.open({
						content: "登陆成功",
						type: 'success'
				   });
				})
				// setInitialState(obj).then(()=>{
				// 	refresh().then(r=>{

				// 		console.log(`initialState:`,initialState)
				// 		// navigate("/")
				// 	})
				// })
			}else{
				message.open({
					content: `登陆失败:状态码:${res.code},错误信息:${res.data}`,
					type: 'error'
			   });
			}
		})
	}, [initialState,setInitialState]);
	return (
		<App>
			<div
				style={{
					backgroundColor: 'white',
					height: '100vh',
				}}
			>
				<LoginFormPage
					backgroundImageUrl="https://mdn.alipayobjects.com/huamei_gcee1x/afts/img/A*y0ZTS6WLwvgAAAAAAAAAAAAADml6AQ/fmt.webp"
					// logo="https://github.githubassets.com/favicons/favicon.png"
					backgroundVideoUrl="https://gw.alipayobjects.com/v/huamei_gcee1x/afts/video/jXRBRK_VAwoAAAAAAAAAAAAAK4eUAQBr"
					onFinish={loginFun}
					// logo="https://github.githubassets.com/favicons/favicon.png"
					title="记事本"
					subTitle="随时查看"
				>
					<ProFormText
						name="username"
						fieldProps={{
							size: 'large',
							prefix: <UserOutlined className={'prefixIcon'} />,
						}}
						placeholder={'用户名'}
						initialValue="root"
						rules={[
							{
								required: true,
								message: '请输入用户名!',
							},
						]}
					/>
					<ProFormText.Password
						name="password"
						initialValue="123"
						fieldProps={{
							size: 'large',
							prefix: <LockOutlined className={'prefixIcon'} />,
						}}
						placeholder={'密码'}
						rules={[
							{
								required: true,
								message: '请输入密码',
							},
						]}
					/>
				</LoginFormPage>
			</div>
		</App>
	);
};
//   const HomePage: React.FC = () => {
// 	const { title } = useModel('Login.model');
// 	  useEffect(() => {
// 		  setTitle(title);
// 	  })
// 	return (
// 	  <div className={styles.box}>
// 		  <h1>{title}</h1>
// 		  <div className={styles.box_item}>
// 			  <input type="text" name="" id="" autoFocus/>
// 		  </div>
// 		  <div className={styles.box_item}>
// 			  <input type="password" name="" id="" />
// 		  </div>
// 		  <div className={styles.box_item}>
// 			  <input type='button' value="登陆" />
// 		  </div>
// 	  </div>
// 	);
//   };

export default HomePage;
